<app-containers-printable-report
  *ngIf="isPrinting && loaded"
  class="printable-area"
  [containers]="quarantinedContainers"></app-containers-printable-report>
<section id="containers-section" class="screen-area">
  <div class="d-flex flew-row align-items-center justify-content-between">
    <h1 class="font-weight-light" id="containers-title">
      {{ 'sidebar.nav.CONTAINERS' | translate }}
    </h1>
    <div class="d-flex align-items-center justify-content-end">
      <ng-container *ngIf="!error">
        <div class="mr-3" *ngIf="autoScanAuthorized && containers.length > 0">
          <mat-slide-toggle
            [formControl]="autoScan"
            (change)="configAutoScan(auto_scan)">
            {{ 'scan.AUTO' | translate }}
            <em
              class="fa fa-info-circle"
              matTooltip="{{ 'scan.AUTO_TIP' | translate }}">
            </em>
          </mat-slide-toggle>
        </div>
        <button
          *ngIf="quarantinedContainers.length > 0"
          aria-label="Print quarantined container report PDF"
          type="button"
          (click)="print()"
          mat-button> {{ 'containers.report.title' | translate }}
          <em class="eos-icons icon-18">print</em>
        </button>
        <button
          mat-button
          [matMenuTriggerFor]="view_menu"
          aria-label="View menu"
          type="menu">
          <i class="eos-icons">settings</i>
          {{ 'network.SETTING' | translate }}
        </button>
        <mat-menu #view_menu="matMenu">
          <form [formGroup]="toggleNodeForm">
            <div
              mat-menu-item
              class="mat-menu-checkbox"
              (click)="$event.stopPropagation()">
              <mat-checkbox
                formControlName="systemNode"
                (change)="nodeFilterChange()">
                {{ 'network.SHOW_SYS_PODS' | translate }}
              </mat-checkbox>
            </div>
            <div
              mat-menu-item
              class="mat-menu-checkbox"
              (click)="$event.stopPropagation()">
              <mat-checkbox
                formControlName="exitNode"
                (change)="nodeFilterChange()">
                {{ 'network.SHOW_EXIT_PODS' | translate }}
              </mat-checkbox>
            </div>
          </form>
        </mat-menu>
      </ng-container>
      <app-loading-button
        (btnClick)="refresh()"
        [appearance]="'mat-button'"
        [buttonClasses]="'d-flex justify-content-center align-items-center'"
        [disabled]="!!(refreshing$ | async)"
        [iconClasses]="'eos-icons icon-18'"
        [iconName]="'refresh'"
        [id]="'containers-refresh-button'"
        [loading]="!!(refreshing$ | async)"
        [text]="'network.REFRESH' | translate"
        [type]="'button'">
      </app-loading-button>
    </div>
  </div>
  <ng-container *ngIf="loaded; else loadingOrErrorTemplate">
    <app-adjustable-div [minHeightOne]="163" [minHeightTwo]="140">
      <ng-container *appContainerOne="let height">
        <mat-card [ngStyle]="{ height: height + 'px' }" class="pt-0">
          <app-containers-grid
            [gridHeight]="height - 85"
            [isScanAuthorized]="isAutoScanAuthorized"
            (scan)="configScan($event)">
          </app-containers-grid>
        </mat-card>
      </ng-container>
      <ng-container *appContainerTwo="let height">
        <mat-card [ngStyle]="{ height: height + 'px' }" class="pt-0">
          <app-container-details
            [gridHeight]="height - 80"
            [container]="selectedContainer">
          </app-container-details>
        </mat-card>
      </ng-container>
    </app-adjustable-div>
  </ng-container>
  <ng-template #loadingOrErrorTemplate>
    <ng-container *ngIf="error; else loadingTemplate">
      <mat-card>
        {{ error | json }}
      </mat-card>
    </ng-container>
    <ng-template #loadingTemplate>
      <app-loading-template></app-loading-template>
    </ng-template>
  </ng-template>
</section>
